<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var xhr;
function createXhr(){
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		xhr = new XMLHttpRequest();
	}
}
//중분류 처리
function getMiddle(){
	createXhr();
	//선택된 대분류의 value값을 조회
	var url = "category_high.do?CategoryHighId="+$("#category_high").val();
	//처리를 요청
	xhr.onreadystatechange = getMiddleCategory;
	xhr.open("GET", url, true);
	xhr.send(null);
}
//중분류 항목 응답처리
function getMiddleCategory(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			var txt = xhr.responseText;
			var jsonData = JSON.parse(txt);
			//소분류 항목 삭제
			$("#category_low").empty().append("<option value='default'>소분류</option>");
			//테이블 삭제
			$("#thead").empty();
			$("#tbody").empty();
			//중분류 추가
			var str = "<option value='default'>중분류</option>";
			for(var i = 0; i<jsonData.length;i++){
				str = str+"<option value="+jsonData[i].category_Middle_Id+">"+jsonData[i].category_Middle_Name+"</option>";
			}
			$("#category_middle").empty().append(str);			
		}else{
			alert("중분류 요청 처리 실패 :"+xhr.status+"-"+xhr.statusText);
		}
	}
}

//소분류 처리
function getLow(){
	createXhr();
	//선택된 대분류의 value값을 조회
	var url = "category_middle.do?categoryMiddleId="+$("#category_middle").val();
	//처리를 요청
	xhr.onreadystatechange = getLowCategory;
	xhr.open("GET", url, true);
	xhr.send(null);
}

//소분류 응답처리
function getLowCategory(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			var txt = xhr.responseText;
			var jsonData = JSON.parse(txt);
			//테이블 삭제
			$("#thead").empty();
			$("#tbody").empty();
			//추가
			var str = "<option value='default'>소분류</option>";
			for(var i=0; i<jsonData.length; i++){
				str = str+"<option value="+jsonData[i].category_Low_Id+">"+jsonData[i].category_Low_Name+"</option>";
			}
			$("#category_low").empty().append(str);
		}else{
			alert("소분류 요청 처리 실패 :"+xhr.status+"-"+xhr.statusText);
		}
	}
}

//책 리스트
function getBookList(){
	createXhr();
	var url = "getBookByCategory.do?CategoryLowId="+$("#category_low").val();
	xhr.onreadystatechange=getBookListByLowCategory;
	xhr.open("GET",url, true);
	xhr.send(null);
}

function getBookListByLowCategory(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			var txt = xhr.responseText;
			var jsonData = JSON.parse(txt);
			$("#thead").empty().append($("<tr>")
					.append($("<td>").text("이름"))
					.append($("<td>").text("저자"))
					.append($("<td>").text("출판사"))
					.append($("<td>").text("조회수"))
					.append($("<td>").text("위치")));	
			
			$("#tbody").empty();
			for(i = 0; i<jsonData.length;i++){				
				$("#tbody").append(
					$("<tr>").append($("<td>").text(jsonData[i].name))
								  .append($("<td>").text(jsonData[i].writer))
					  	  		.append($("<td>").text(jsonData[i].publisher))
					  	  		.append($("<td>").text(jsonData[i].count))
					  	  		.append($("<td>").text(jsonData[i].location)))
			}
		}else{
			alert("제품조회 요청처리 실패 : "+xhr.status+" - "+xhr.statusText);
		}
	}
}
</script>
<style type="text/css">
table, th, td{
	border-collapse: collapse;
	border: 1px solid black;
	
}
table{
width:700px;
}
</style>
</head>
<body>
대분류 :
<select name="category_high" id="category_high" onChange="getMiddle()">
<option value=''>대분류</option>
<c:forEach var="hc" items="${highCategory }">
	<option value="${hc.category_high_id }">
		${hc.category_high_name }
	</option>
</c:forEach>
</select>
중분류 :
<select id="category_middle" onChange="getLow()">
	<option value="default">중분류</option>
</select>
소분류 :
<select id="category_low" onChange="getBookList()">
	<option value="default">소분류</option>
</select>
<p>
<table>
	<thead id="thead"></thead>
	<tbody id="tbody"></tbody>
</table>
</body>
</html>